 /*
 * @description: 商家物料清单列表
 * @Author: along
 * @Date: 2021-03-16
 * @Last Modified by: along
 * @Last Modified time: 2021-03-24
 */
<template>
    <div class="container shopMateriel">
        <p class="shopMateriel_title">商家物料清单列表</p>
        <el-tabs
            v-model="formData.status"
            @tab-click="handleClick"
        >
            <el-tab-pane
                label="全部"
                :name="'99'"
            />
            <el-tab-pane
                label="待提交"
                :name="'0'"
            />
            <el-tab-pane
                label="待审核"
                :name="'1'"
            />
            <el-tab-pane
                label="已通过"
                :name="'2'"
            />
            <el-tab-pane
                label="未通过"
                :name="'-1'"
            />
        </el-tabs>
        <!-- header -->
        <div class="header-nav">
            <div class="header-left">
                <div class="header-new-box">
                    <p class="header-new-box-title">公司名称:</p>
                    <el-input
                        v-model="formData.company_name"
                        placeholder="请输入公司名称"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">产品名称:</p>
                    <el-input
                        v-model="formData.shop_name"
                        placeholder="请输入产品名称"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">创建人:</p>
                    <el-input
                        v-model="formData.founder"
                        placeholder="请输入创建人"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">创建时间:</p>
                    <el-date-picker
                        v-model="date"
                        type="datetimerange"
                        :picker-options="pickerOptions()"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        align="right"
                        size="small"
                        @change="getTableData(1)"
                        :style="{width: '330px'}"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">店铺状态:</p>
                    <el-select
                        v-model="formData.shop_status"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in shopList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="header-new-box">
                    <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="getTableData(1)"
                    >
                        查询
                    </el-button>
                </div>
                <div class="header-new-box">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleCreateMateriel()"
                    >
                        新建清单
                    </el-button>
                </div>
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: calc(100% - 48px);margin: 0 24px"
            border
            ref="shopMateriel"
        >
            <el-table-column
                type="index"
                width="80"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="company_name"
                label="公司名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
                :width="200"
            />
            <el-table-column
                prop="material_name"
                label="产品名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
                :width="200"
            >
                <template slot-scope="scope">
                    <div class="sort-wrap">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            :content="scope.row.material_name"
                            placement="top-start">
                            <el-button
                                type="text"
                                :style="{color: '#606266'}"
                            >
                                {{ scope.row.material_name | filterLength }}
                            </el-button>
                        </el-tooltip>
                        <span class="sort-spliter" />
                        <el-button
                            type="text"
                            class="btn-sort"
                            @click="handleChangeProduct(scope.row)"
                        >
                            <i class="el-icon-edit" />
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="shop_status"
                label="店铺状态"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
                :width="90"
            >
                <template slot-scope="scope">
                    {{ scope.row.shop_status | filterShopStatus }}
                </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="创建时间"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="admin_true_name"
                label="创建人"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            />
            <el-table-column
                prop="status"
                label="填表状态"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    <div class="_status_wrap">
                        <p
                            class="_status"
                            :style="{background: scope.row.status === 0 ? 'rgba(255, 167, 45, 1)' : 'rgba(194, 194, 194, 1)'}"
                        />
                        {{ scope.row.status === 0 ? '未提交' : scope.row.status === 1 || scope.row.status === 2 || scope.row.status === -1 ? '已提交' : '--' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="submit_time"
                label="提交时间"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    {{ scope.row.submit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="status"
                label="审核状态"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
                :width="140"
            >
                <template slot-scope="scope">
                    <div class="_status_wrap">
                        <p
                            class="_status"
                            :style="{background: scope.row.status === 0 ? 'rgba(194, 194, 194, 1)' : scope.row.status === 1 ? 'rgba(255, 167, 45, 1)' : scope.row.status === 2 ? 'rgba(76, 217, 100, 1)' : scope.row.status === -1 ? 'rgba(255, 48, 48, 1)' : ''}"
                        />
                        {{ scope.row.status === 0 ? '待提交' : scope.row.status === 1 ? '待审核' : scope.row.status === 2 ? '审核通过' : scope.row.status === -1 ? '审核不通过' : '--' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="tracking_status"
                label="签收状态"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    <div class="_status_wrap">
                        <p
                            v-if="scope.row.tracking_status === 1 || scope.row.tracking_status === 2"
                            class="_status"
                            :style="{background: scope.row.tracking_status === 1 ? 'rgba(255, 167, 45, 1)' : scope.row.tracking_status === 2 ? 'rgba(76, 217, 100, 1)' : ''}"
                        />
                        {{ scope.row.tracking_status === 1 ? '待签收' : scope.row.tracking_status === 2 ? '已签收' : '--' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                :width="300"
            >
                <template slot-scope="scope">
                    <div class="flex">
                        <el-button
                            type="text"
                            class="curse-add"
                            :disabled="scope.row.status === 0"
                            @click="handleCheckForm(scope.row)"
                        >
                            查看
                        </el-button>
                        <!-- 待审核 -->
                        <el-button
                            type="text"
                            class="curse-add"
                            v-if="scope.row.status === 1"
                            @click="handleAgreeForm(scope.row)"
                        >
                            通过
                        </el-button>
                        <!-- 待审核 -->
                        <el-button
                            type="text"
                            class="curse-add"
                            v-if="scope.row.status === 1"
                            @click="handleRefuseForm(scope.row)"
                        >
                            驳回
                        </el-button>
                        <!-- 已提交 -> 待签收 -->
                        <el-button
                            type="text"
                            class="curse-add"
                            v-if="scope.row.status === 2 && scope.row.tracking_status === 1"
                            @click="handleConfirmSign(scope.row)"
                        >
                            确认签收
                        </el-button>
                        <!-- 已提交 -> 待签收/已签收 -->
                        <el-button
                            type="text"
                            class="curse-add"
                            v-if="scope.row.status === 2 && scope.row.tracking_status !== 0"
                            @click="handleCheckLog(scope.row)"
                        >
                            查看物流信息
                        </el-button>
                        <!-- 已提交/审核通过/已签收 -->
                        <el-button
                            type="text"
                            class="curse-add"
                            v-if="scope.row.status !== 0"
                            @click="handleRemarkForm(scope.row)"
                        >
                            备注
                        </el-button>
                        <!-- 审核不通过 -->
                        <el-button
                            type="text"
                            class="curse-add"
                            v-if="scope.row.status == -1"
                            @click="handleRefuseReson(scope.row)"
                        >
                            驳回原因
                        </el-button>
                        <el-button
                            type="text"
                            style="color: #F95B56"
                            @click="handleDelete(scope.row)"
                        >
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- /分页 -->
        <div class="pagination-wrapper clearfix">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>

        <!-- 审核通过弹窗 -->
        <confirm-dialog
            ref="confirmDialog"
            :url="'http://cdn.zsdx.cn/student-app/images/dialog_logo.png'"
            :title="'审核通过提示'"
            :content="'是否确认通过改商家的物料清单审核？'"
            @confrim="confirmDialogForm"
        />

        <!-- 驳回弹窗 -->
        <refuse-dialog
            ref="refuseDialog"
            @confirm="confirmRefuseDialog"
        />

        <!-- 确认签收弹窗 -->
        <confirm-dialog
            ref="confirmDialog2"
            :url="'http://cdn.zsdx.cn/student-app/images/dialog_logo.png'"
            :title="'确认签收提示'"
            :content="'是否确认签收商家寄送的物料？'"
            @confrim="confirmDialogSign"
        />

        <!-- 查看物流信息 -->
        <logistics-info
            ref="logisticsInfo"
            :is_copy="true"
        />

        <!-- 备注 -->
        <remark-list-dialog
            ref="remarkListDialog"
        />

        <!-- 新建批次弹窗 -->
        <create-branch
            ref="createBranch"
            @confirm="confirmBranch"
            @update="updateBranch"
        />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import { getDate } from '@/assets/js/utils';
import confirmDialog from '@/components/dialog/index.vue';
import refuseDialog from '@/components/bid/refuse-dialog.vue';
import logisticsInfo from '@/components/dialog/change-logistics-dialog.vue';
import remarkListDialog from '@/components/bid/remark-list-dialog.vue';
import createBranch from '@/components/bid/create-branch.vue';
export default {
    mixins: [back],
    components: {
        confirmDialog,
        refuseDialog,
        logisticsInfo,
        remarkListDialog,
        createBranch
    },
    data () {
        return {
            ID: '',//记录id
            formData: {
                status: '99', //99:全部 0:待提交 1:待审核 2:已通过 -1:未通过
                company_name: '',//公司名称
                shop_name: '',
                founder: '',
                shop_status: 99,//店铺状态 99:全部 1:运营中 2:关店公示期 3:已关店
            },
            date: [],
            shopList: [{value: 99, label: '全部'},{value: 1, label: '运营中'},{value: -1, label: '关店公示期'},{value: 0, label: '已关店'}],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [
                // {
                //     status: 1
                // }
            ],
            authResult: {},
            //查看物流信息
            logistics: {}
        };
    },
    filters: {
        filterLength (val) {
            if(!val) return;
            if(val.length <= 8) return val;
            return val.slice(0,8) + '...';
        },
        filterShopStatus (val) {
            if(val === 1) return '运营中';
            if(val === -1) return '关店公示期';
            if(val === 0) return '已关店';
        }
    },
    computed: {},
    watch: {},
    mounted () {
        if(this.$route.query.type && !!sessionStorage.getItem('filterData')) {
            let filterData = JSON.parse(sessionStorage.getItem('filterData'));

            this.formData = { ...filterData.formData };
            this.date = { ...filterData.date };
            this.$set(this.page, 'now_page',filterData.page );
        }
        this.$store.commit('SET_HEADER', [{ title: "官网"},{title: '商家增值服务'},{title: '商家物料清单列表'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData(this.page.now_page);
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/hire_room_series_material%5Cget_list', {
                page_id: page || this.page.now_page,
                start_time: this.date === null ? '' : (this.date.length == 0 ? '' : getDate(new Date(this.date[0]))),
                end_time: this.date === null ? '' : (this.date.length == 0 ? '' : getDate(new Date(this.date[1]))),
                status: Number(this.formData.status),
                company_name: this.formData.company_name,
                material_name: this.formData.shop_name,
                admin_true_name: this.formData.founder,
                shop_status: Number(this.formData.shop_status)
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 状态切换
         */
        handleClick () {
            this.getTableData();
        },

        /**
         * @description 新建清单
         */
        handleCreateMateriel () {
            this.$refs.createBranch.show('add');
        },

        /**
         * @description 确定新建批次信息
         */
        confirmBranch (obj) {
            this.$post('/student/hire_room_series_material%5Ccreate', {
                hire_no: obj.company_name,
                material_name: obj.material_name
            }, resp => {
                if(resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '新增成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 更新产品名称
         */
        updateBranch (obj) {
            this.$post('/student/hire_room_series_material%5Cupdate', {
                material_no: this.ID,
                material_name: obj.material_name
            }, resp => {
                if(resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '更新成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 修改产品名称
         */
        handleChangeProduct (row) {
            this.ID = row.material_no; //记录id
            this.$refs.createBranch.show('edit', row.company_name, row.material_name);
        },

        /**
         * @description 查看详情
         */
        handleCheckForm (row) {
            sessionStorage.setItem('filterData', JSON.stringify({
                formData: this.formData,
                date: this.date,
                page: this.page.now_page
            }));

            this.$router.push({
                name: 'shopMaterielInfo',
                query: {
                    no: row.material_no,
                    material_name: row.material_name
                }
            });
        },

        // formData: {
        //         status: '99', //99:全部 0:待提交 1:待审核 2:已通过 -1:未通过
        //         company_name: '',//公司名称
        //         shop_name: '',
        //         founder: '',
        //         shop_status: 99,//店铺状态 99:全部 1:运营中 2:关店公示期 3:已关店
        //     },
        //     date: [],

        /**
         * @description 打开审核通过弹窗
         */
        handleAgreeForm (row) {
            this.ID = row.material_no; //记录id
            this.$refs.confirmDialog.showDialog();
        },

        /**
         * @description 确定通过审核
         */
        confirmDialogForm () {
            this.$post('/student/hire_room_series_material%5Caudit', {
                material_no: this.ID,
                action: 'pass',
                reason: ''
            }, resp => {
                if(resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 驳回
         */
        handleRefuseForm (row) {
            this.ID = row.material_no; //记录id
            this.$refs.refuseDialog.show({
                type: 1,
                title: '物料清单不通过',
                reson: ''
            });
        },

        /**
         * @description 确定驳回
         */
        confirmRefuseDialog (reson) {
            this.$post('/student/hire_room_series_material%5Caudit', {
                material_no: this.ID,
                action: 'reject',
                reason: reson
            }, resp => {
                if(resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 打开确认签收弹窗
         */
        handleConfirmSign (row) {
            this.ID = row.material_no; //记录id
            this.$refs.confirmDialog2.showDialog();
        },

        /**
         * @description 确认签收
         */
        confirmDialogSign () {
            this.$post('/student/hire_room_series_material%5Csign', {
                material_no: this.ID
            }, resp => {
                if(resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 查看物流信息
         */
        handleCheckLog (row) {
            this.$refs.logisticsInfo.show(row.logistics_name, row.tracking_no, 2);
            // this.$post('/student/hire_room_series_material%5Cget', {
            //     material_no: row.material_no
            // }, resp => {
            //     if(resp.code == 1) {
            //         this.$refs.logisticsInfo.show(resp.data.logistics_no, resp.data.tracking_no, 2);
            //     } else {
            //         this.$notify({
            //             title: '提示',
            //             message: resp.msg,
            //             type: 'warning',
            //             duration: 2000
            //         });
            //     }
            // });
        },

        /**
         * @description 备注
         */
        handleRemarkForm (row) {
            this.$refs.remarkListDialog.show(row.material_no);
        },

        /**
         * @description 查看驳回原因
         */
        handleRefuseReson (row) {
            this.$post('/student/hire_room_series_material%5Cget', {
                material_no: row.material_no
            }, resp => {
                if(resp.code == 1) {
                    this.$refs.refuseDialog.show({
                        type: 2,
                        title: '不通过原因',
                        reson: resp.data.audit_reason
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 时间处理
         */
        pickerOptions () {
            return {
                shortcuts : [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            };
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 删除
         * @param row
         */
        handleDelete(row) {
            this.$zdConfirm('删除后数据不可恢复，确认是否要删除？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/hire_room_series_material%5Cdelete', {
                    material_no: row.material_no
                }, resp => {
                    if(resp.code === 1) {
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            type: 'success',
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                        });
                    }
                });
            }).catch(() => {});
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        position: relative;
        width: calc(100% - 24px);
        height: calc(100% - 24px);
        box-sizing: border-box;
        margin: 12px;
        .shopMateriel_title {
            color: rgba(51, 51, 51, 1);
            font-size: 18px;
            font-weight: 500;
            margin: 24px 0 0 24px;
            padding-bottom: 24px;
            // border-bottom: 1px rgba(240, 242, 245, 1) solid;
        }
        .header-nav {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 24px 24px 24px;
            .header-left, .header-right {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .header-new-box {
                display: flex;
                margin-right: 32px;
                align-items: center;
                color: #606266;
                margin-top: 24px;
                white-space: nowrap;
                &-title {
                    margin-right: 12px;
                    white-space: nowrap;
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 24px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
    .el-button-left {
        margin-left: 40px;
    }
    .el-button-right {
        margin-right: 10px;
    }
    .flex {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    ._status_wrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        ._status {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 6px;
        }
    }
</style>
<style lang="less">
    .shopMateriel{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-tabs {
            // margin-right: 180px;
            .el-tabs__nav {
                margin-left: 24px;
            }
            .el-tabs__nav-wrap::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background-color: #E4E7ED;
                z-index: 1;
            }
        }
    }
</style>
